<template>
	<view class="tn-p">

		<view v-if="!data.order_no">
			<view class="flex-center tn-gray_text">
				加载中...
			</view>
		</view>

		<view class="ta-card" v-if="data.order_no">
			<view class="ta-card-body">
				<view class="flex-x flex-align-center" v-if="data.delivery_type">
					<uv-icon size="60rpx" color="rgba(0,0,0,0.3)" name="map" />
					<view class="flex-1 tn-pl-xs" v-if="data.address">
						<view class="flex-x flex-x-between flex-align-center">
							<view class="flex-x tn-text-bold">
								<text>{{ data.address.user_name }}</text>
								<text class="tn-ml-sm">{{ data.address.user_phone }}</text>
							</view>
							<view class="ta-desc-text">
								{{ data.address.region_prov }} {{ data.address.region_city }} {{ data.address.region_area }}
							</view>
						</view>
						<view class="tn-mt-xs ta-desc-text">{{ data.address.region_addr }}</view>
					</view>
					<view class="flex-1 tn-pl flex-align-center" v-else>
						<view class="ta-desc-text">未设置收货地址！</view>
					</view>
				</view>
				<view v-else class="tn-text-center">
					<text class="ta-desc-text tn-text-sm">虚拟产品，无需发货！</text>
				</view>
			</view>
		</view>


		<view v-if="data.order_no" class="ta-card">
			<view class="ta-card-head">
				<text>{{ data.order_no }}</text>
				<view>
					<!-- 订单流程状态(0已取消,1预订单,2待支付,3待审核,4待发货,5已发货,6已收货,7已评论) -->
					<text v-if="data.status == 0" class="ta-main-text">已取消</text>
					<text v-if="data.status == 1" class="ta-main-text">预订单</text>
					<text v-if="data.status == 2" class="ta-main-text" @click="goto.payment(code)">待支付</text>
					<text v-if="data.status == 3" class="ta-main-text" @click="goto.payment(code)">待审核</text>
					<text v-if="data.status == 4" class="ta-main-text">待发货</text>
					<text v-if="data.status == 5" class="ta-main-text">待收货</text>
					<text v-if="data.status == 6" class="ta-main-text">待评论</text>
					<text v-if="data.status == 7" class="ta-main-text">已完成</text>
				</view>
			</view>
			<view v-if="data.items" class="ta-card-body">
				<view class="flex-x tn-pt-xs tn-pb-xs" v-for="xx in data.items" :key="xx.unid"
					@click="goto.goods(xx.gcode, xx.ghash)">
					<uv-image :src="xx.gcover" height="90rpx" width="90rpx" radius="10rpx" :lazy-load="true" />
					<view class="flex-1 flex-y flex-y-center tn-pl-sm" style="justify-content:space-evenly;">
						<text class="ta-main-text uv-line-1 tn-text-bold ">{{ xx.gname }}</text>
						<text class="ta-desc-text uv-line-1 tn-text-sm">{{ showSpec(xx.gspec) }}</text>
					</view>
					<view class="tn-text-right flex-align-center">
						<view class="flex-y">
							<view class="tn-text-bold" v-if="Number(xx.price_selling) > 0">
								<uv-text mode="price" type='error' :text="xx.price_selling" />
							</view>
							<view class="tn-text-bold ta-desc-text" v-if="Number(xx.price_selling) <= 0">免费</view>
							<view class="ta-desc-text tn-text-xs"> x {{ xx.stock_sales }} {{ xx.gunit }}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="ta-card-foot flex-wrap flex-x-between">
				<view class="flex-x flex-1 flex-x-normal flex-wrap">
					<view>共包含 <text class="tn-text-bold tn-red_text">{{ stocks }}</text> 件商品</view>
					<view>
						<text class="tn-pr-xs">，累计</text>
						<text class="tn-text-bold tn-red_text">
							{{ Number(data.amount_goods) + Number(data.amount_express) }}
						</text>
						<text class="tn-pl-xs">元</text>
					</view>
					<view class="tn-pl-xs nowrap" v-if="Number(data.amount_express) > 0">
						( 含运费 {{ Number(data.amount_express) }} 元 )
					</view>
					<view v-if="Number(data.amount_reduct) > 0">
						，减免 <text class="tn-text-bold tn-red_text">{{ Number(data.amount_reduct) }}</text> 元。
					</view>
				</view>
			</view>
			<view class="ta-card-foot flex-wrap flex-x-between ">
				<view class="tn-text-xs ta-desc-text flex-center">{{ data.create_time }}</view>
				<view class="ta-main-text flex-center" style="justify-content: end;">
					<text class="ta-desc-text">{{ data.payment_status ? '已付' : '需付' }}</text>
					<uv-text mode='price' type='error' size="35rpx" :bold="true" :text="data.amount_real" />
				</view>
			</view>
		</view>

		<view class="ta-card" v-if="data.payments.length > 0">
			<view class="ta-card-head">支付信息</view>
			<view class="ta-card-body">
				<view v-for="p in data.payments" :key="p.code" class="tn-mb-xs ta-desc-text tn-white_bg">
					<view>支付方式：{{ p.channel_type_name }}</view>
					<view>支付单号：{{ p.code }}</view>
					<view class="flex-x">
						<view class="tn-pr-xs flex-x flex-align-center">
							<text>支付金额：</text>
							<uv-text mode="price" :text="p.payment_amount" />
						</view>
						<view v-if="p.channel_type === 'voucher'">
							<uv-tags v-if="p.audit_status === 0" size="mini" shape="circle" type="error" text="已拒绝" />
							<uv-tags v-if="p.audit_status === 1" size="mini" shape="circle" type="info" text="待审核" />
							<uv-tags v-if="p.audit_status === 2" size="mini" shape="circle" type="success" text="已完成" />
						</view>
						<view v-else>
							<uv-tags v-if="p.payment_status === 0" size="mini" shape="circle" type="info" text="未完成" />
							<template v-if="p.payment_status === 1">
								<uv-tags v-if="p.refund_status && p.audit_status === 1" size="mini" shape="circle"
									type="warning">{{ p.payment_amount > p.refund_amount ? '部分退回' : '全部退回' }}</uv-tags>
								<uv-tags v-else size="mini" shape="circle" type="success" text="已完成" />
							</template>
						</view>
					</view>
					<view>创建时间：{{ p.create_time }}</view>
				</view>
			</view>
		</view>

		<view class="flex-center tn-mt-xl" v-if="data.status == 5">
			<uv-transition :show="true" mode="slide-top">
				<uv-button shape="circle" type="success" @click="confirm" text="确认收货"
					customStyle="width:450rpx;height:90rpx" />
			</uv-transition>
		</view>

		<view class="flex-center tn-mt-xl" v-if="data.status == 0">
			<uv-transition :show="true" mode="slide-top">
				<uv-button shape="circle" type="error" @click="remove" text="移除订单"
					customStyle="width:450rpx;height:90rpx" />
			</uv-transition>
		</view>

	</view>
</template>

<script lang="ts">

import { defineComponent } from 'vue'
import { TaToast, TaDataOrder, TaUseAccount } from '@/utils';

export default defineComponent({
	setup() {
		return TaUseAccount()
	},
	data() {
		return {
			data: <any>{ // 当前订单
				payments: [] // 支付信息
			},
			code: <string>'', // 当前订单编号
			stocks: <number>0, // 该订单包含商品数量
		}
	},
	onLoad(options: any) {
		this.code = options.code || ''
	},
	onShow() {
		// 加载订单数据
		this.loadData().catch((ret: any) => {
			TaToast.error("加载订单异常！").then(() => this.goto.home())
		}).finally(() => uni.stopPullDownRefresh());
	},
	onPullDownRefresh() {
		this.loadData();
		setTimeout(() => uni.stopPullDownRefresh(), 1500);
	},
	methods: {
		// 加载订单数据
		loadData() {
			return new Promise((resolve, reject) => {
				TaDataOrder.get({ order_no: this.code }).then((ret: any) => {
					if (ret.data.list.length > 0) {
						this.stocks = 0
						this.data = ret.data.list[0];
						this.data.items.forEach((x: any) => this.stocks += x.stock_sales)
						resolve(ret)
					} else {
						this.data = { payments: [] }
						reject()
					}
				}).catch(reject)
			})
		},
		// 确认订单已收货
		confirm() {
			TaToast.confirm('确认已经收货了吗？').then(() => {
				TaDataOrder.confirm({ order_no: this.code }).then((ret: any) => {
					this.loadData(), TaToast.success(ret.info);
				})
			})
		},
		// 移除已取消订单
		remove() {
			TaToast.confirm('确认要移除订单吗？').then(() => {
				TaDataOrder.remove({ order_no: this.code }).then((ret: any) => {
					TaToast.success(ret.info).then(() => this.goto.back());
				})
			})
		}
	}
})
</script>